<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="申请退款" :border-bottom="false" title-color="#333"
				back-icon-color="#333"></u-navbar>
		</view>
		<view class="goodsBox container_br" v-if="goods">
			<view class="title">
				退款商品
			</view>
			<view class="goods flc" v-for="item in goods.goods" :key="item.id">
				<view class="left">
					<image :src="item.goods_images_format[0]" mode="widthFix"
						style="width: 180rpx; border-radius: 20rpx;"></image>
				</view>
				<view class="right ml2">
					<view class="name">
						{{item.goods_name}}
					</view>
					<view class="jsbc num">
						<view class="num_t">
							数量
						</view>
						<view class="num">
							X{{item.goods_number}}
						</view>
					</view>
					<view class="price">
						￥{{item.goods_price}}
					</view>
				</view>
			</view>
		</view>
		<view class="info container_br">
			<view class="title">
				退款信息
			</view>
			<view class="cause ">
				<view class="cell" @click="()=>this.show=true">
					<view class="left">
						退款类型
					</view>
					<view class="right">
						<span v-if="selectCt">{{selectCt}}</span>
						<view class="hhh" v-else>
							请选择<u-icon size="30" color="#999" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="priceBox ">
				<view class="cell">
					<view class="left">
						退款金额
					</view>
					<view class="price">
						￥{{price}}
					</view>
				</view>
			</view>
		</view>
		<view class="deliver container_br" v-if="selectId==2">
			<view class="title">
				退款物流信息
			</view>
			<view class="cell" @click="()=>this.showWl = true">
				<view class="left">
					物流公司
				</view>
				<view class="right">
					<span>{{expressName||"请选择"}}</span>
					<u-icon class="ml2" name="arrow-right" size="32" color="#dedede"></u-icon>
				</view>
			</view>
			<view class="cell">
				<view class="left">
					物流单号
				</view>
				<view class="right">
					<input type="text" placeholder="请输入物流单号" v-model="support_express_number" placeholder-class="placlass" style="text-align: right;" />
				</view>
			</view>
		</view>
		<view class="refundDesc container">
			<view class="title">
				退款原因和凭证
			</view>
			<view class="desc">
				<textarea placeholder="请描述一下退货原因,有助于商家处理售后问题" v-model="reason" style="width: 650rpx;height: 140rpx;" />
			</view>
			<view class="upload_pic">
				<view class="item" v-for="(item,index) in pic" :key="index">
					<image :src="item" style="width: 160rpx; height: 160rpx;"></image>
					<u-icon size="30" name="trash-fill" class="delete" @click="deleteTp(index)"></u-icon>
				</view>
				<view class="upload" @click="handleChooseImage">
					<u-icon size="160" :name="'/static/img/upload.png'"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="submitBtn">
			<view class="submit" @click="submit">
				确认申请
			</view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" height="350">
			<view class="selectCause">
				<view class="cells" v-for="item in selectCell" :key="item.id" :class="{active:selectId==item.id}"
					@click="selectCells(item.id)">
					{{item.name}}
				</view>
			</view>
		</u-popup>
		<u-picker mode="selector" v-model="showWl"  :default-selector="[0]" :range="selector" @confirm="selectExpress"></u-picker>
	</view>
</template>

<script>
	import { closeload, toastload } from '../../utils/common';
import {
		refundOrder,
		getOrderDetail,
		getExpress
	} from '/api/index.js'
	import baseUrl from '@/config/config.js'
	export default {
		data() {
			return {
				value: 1,
				price: "0",
				pic: [],
				showPic: [],
				show: false,
				selectId: '',
				selectCt: "",
				reason: "",
				selectCell: [{
					id: 1,
					name: "仅退款"
				} ],
				support_express_number: "",
				orderId: "",
				goods: "",
				showWl:false,
				selector:[],
				express:[],
				expressId:'',
				expressName:""
			};

		},
		onLoad(res) {
			this.orderId = res.id
			this.initData(res.id)
		},
		methods: {
			initData(id) {
				toastload()
				getOrderDetail(id).then(res => {
					console.log("订单详情", res);
					this.price = res.data.total_amount
					this.goods = res.data
					if (res.data.status == 2) {
						this.selectCell.push({
							id: 2,
							name: '退货退款'
						})
						
						getExpress().then(res=>{
							console.log(res);
							this.selector = res.data.map(item=>{
								return item.name
							})
							this.express = res.data
						})
					}
					closeload()
				})
			},
			selectExpress(e){
				console.log(e);
				this.expressId = this.express[e[0]].id
				this.expressName = this.express[e[0]].name
				
			},

			handleChooseImage() {
				let self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading({
							title: '正在上传',
							mask: true
						});
						uni.uploadFile({
							url: baseUrl.baseUrl + 'public/images/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							success: (res) => {
								console.log(JSON.parse(res.data));
								if (res.statusCode == 200) {
									let data = JSON.parse(res.data);
									if (data.data) {
										console.log("开始修改");
										self.pic.push(baseUrl.base+'/uploads/'+data.data);
										self.showPic.push(data.data)
									}
									uni.hideLoading();
								}
							},
							complete(res) {
								uni.hideLoading();
							}
						})
					}
				});

			},

			selectCells(id) {
				this.selectId = id
				this.selectCt = this.selectCell[id-1].name
				this.show = false
			},
			deleteTp(index) {
				console.log("删除", index);
				this.pic.splice(index, 1)
				this.showPic.splice(index,1)
			},

			submit() {
				if (!this.selectId) {
					uni.showToast({
						title: "请选择退款类型",
						icon: "none"
					})
					return
				}
				if (!this.reason) {
					uni.showToast({
						title: "请填写退款理由",
						icon: "none"
					})
					return
				}
				if(this.selectId==2){
					if (!this.expressId) {
						uni.showToast({
							title: "请选择物流公司",
							icon: "none"
						})
						return
					}
					if (!this.support_express_number) {
						uni.showToast({
							title: "请输入物流单号",
							icon: "none"
						})
						return
					}
				}
				let obj = {
					order_id: this.orderId,
					type: this.selectId,
					refund_images: this.showPic,
					refund_reason: this.reason,
					support_express_id: this.expressId,
					support_express_number: this.support_express_number
				}
				refundOrder(obj).then(res => {
					console.log("数据", res);
					if (res.code == 200) {
						uni.showToast({
							title: "申请成功",
							icon: "none"
						})
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 36rpx;
		font-weight: 700;
	}

	.submitBtn {
		width: 750rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin-top: 40rpx;
	}

	.tips {
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}

	.submit {
		width: 690rpx;
		height: 80rpx;
		background: #FB4525;
		border-radius: 40rpx;
		text-align: center;
		margin-top: 40rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.container {
		width: 710rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx auto;
	}

	.line {
		width: 650rpx;
		height: 1rpx;
		background: #FFFFFF;
		border: 1px solid #E9EDF0;

	}

	.cell {
		padding: 30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.refundDesc {
		padding: 20rpx;

		.upload_pic {
			display: flex;

			.item {
				width: 160rpx;
				height: 160rpx;
				position: relative;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.item .delete {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}

			.upload {
				width: 160rpx;
				height: 160rpx;
				background: #F5F6F8;
				border-radius: 10rpx;
				box-sizing: border-box;
			}
		}
	}

	.selectCause {
		box-sizing: border-box;
		width: 750rpx;
		padding: 20rpx;
		background-color: #fff;
		text-align: center;

		.cells {
			border-top: 1rpx solid #dedede;
			box-sizing: border-box;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #333;

			&:nth-child(1) {
				border: none;
			}
		}

		.cells.active {
			color: #fb4525;
			font-size: 34rpx;
		}
	}

	.select {
		display: flex;
		width: 710rpx;
		margin: 20rpx auto;

		.type {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			text-align: center;
			border: 1rpx solid #dedede;
			background-color: #fff;
			color: #333;
			margin-right: 40rpx;
		}

		.type.active {
			background-color: rgba(251, 69, 37, 0.5);
			color: #fff;
		}
	}

	.goods {
		.right {
			width: 450rpx;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				width: 400rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}

		}
	}

	.price {
		color: #FB4525;
		font-weight: 700;
		font-size: 32rpx;
	}
</style>